﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function addDataToSessionStorage(data) {
            sessionStorage.setItem(new Date().getTime(),data);
        }

        function addDataToLocalStorage(data) {
            localStorage.setItem(new Date().getTime(), data);
        }

        function refreshData() {
            var tblSession = document.getElementById("tblSession");
            var tblLocal = document.getElementById("tblLocal");

            tblSession.innerHTML = "";
            tblLocal.innerHTML = "";

            for(var i=0;i<sessionStorage.length;i++) {
                var key = sessionStorage.key(i);
                var value = sessionStorage.getItem(key);

                tblSession.innerHTML += "<tr><td>"+key+"</td><td>"+value+"</td></tr>";
            }


            for (var i = 0; i < localStorage.length; i++) {
                var key = localStorage.key(i);
                var value = localStorage.getItem(key);

                tblLocal.innerHTML += "<tr><td>" + key + "</td><td>" + value + "</td></tr>";
            }
        }
        
    

    </script>
</head>
    <body>
        <input type="text" name="demoData" id="demoData"/>
        <hr/>
        <h3>SessionStorage</h3>
    
        <input type="button" value="添加到会话缓存里面" onclick="addDataToSessionStorage(document.getElementById('demoData').value);alert('ok');"/>

        <hr/>
        <h3>LocalStorage</h3>
        <input type="button" value="添加到本地缓存里面" onclick="addDataToLocalStorage(document.getElementById('demoData').value);alert('ok');"/>
        <hr/>
        <h3>缓存数据</h3>
        <input type="button" value="刷新本地缓存数据" onclick="refreshData();"/>
        <h3>会话缓存</h3>
        <table id="tblSession">
          <tr>  <th>key</th><th>Value</th></tr>
        </table>
        <h3>本地缓存</h3>
        <table id="tblLocal">
           <tr> <th>key</th><th>Value</th></tr>
        </table>
    </body>
</html>
